<template>
    <div class="icon-select-cp border-radius_1">
        <el-image
            v-if="activeMode.value=='one'"
            fit="cover"
            class="border-radius_1"
            :src="activeImgUrl">
            <div slot="error">
                <i class="el-icon-picture-outline"></i>
            </div>
            <div slot="placeholder">
                <i class="el-icon-loading"></i>
            </div>
        </el-image>
        <el-image
            v-else
            fit="cover"
            class="border-radius_1"
            :src="activeimgBase64">
            <div slot="error">
                <i class="el-icon-picture-outline"></i>
            </div>
            <div slot="placeholder">
                <i class="el-icon-loading"></i>
            </div>
        </el-image>
        <div class="right-container">
            <MyTabs
                class="type-list border-radius_1"
                :tabs="modeList"
                :activeIndex="modeList.indexOf(activeMode)"
                @onChange="modeChange">
            </MyTabs>
            <div 
                class="remove-bt border-radius_1" 
                @click="removeData">
                <i class="el-icon-delete"></i>
            </div>
            <div class="select-container">
                <div 
                    class="one" 
                    v-if="activeMode.value=='one'">
                    <div class="website">
                        <el-input
                            placeholder="网址"
                            v-model="websiteLink"
                            size="mini"
                            clearable>
                        </el-input>
                        <el-button size="mini" @click="getIcon">一键获取Icon</el-button>
                    </div>
                    <el-input
                        type="textarea"
                        placeholder="请输入图标链接"
                        v-model="activeImgUrl"
                        clearable>
                    </el-input>
                    <div class="website-list">
                        <a class="border-radius_1" href="https://www.hualigs.cn/" target="_blank">遇见图床</a>
                        <a href="https://sm.ms/" target="_blank">Sm.ms图床</a>
                        <a href="https://imgchr.com/" target="_blank">路过图床</a>
                        <a href="https://imgurl.org/" target="_blank">ImgUrl图床</a>
                        <a href="https://image.kieng.cn/" target="_blank">Kieng图床</a>
                    </div>
                </div>
                <div 
                    class="two border-radius_1"
                    v-else>
                    <SingleFileSelectCp
                        @onChange="fileChange"
                        :title="imgFile?imgFile.name:'请选择图片(会自动压缩到100k以内)'"
                        accept="image/gif,image/jpeg,image/jpg,image/png,icon">
                    </SingleFileSelectCp>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/*
 基于vue2 element-ui的icon图标选择器
 */
import MyTabs from "@/components/MyTabs";
import SingleFileSelectCp from "@/components/SingleFileSelectCp";
import {compressImg} from "@/common/ImgFileTools";
import {getIcon} from "@/common/OtherTools";
export default {
    name:"IconSelect",
    components:{MyTabs,SingleFileSelectCp},
    data(){
        this.modeList = [  //模式列表
            {lable:'使用图片链接',value:'one'},
            {lable:'使用本地图片',value:'two'},
        ];
        this.maxSize = 15;  //文件最大大小
        return{
            activeMode:this.modeList[0], //当前选择的模式，默认第一项
            websiteLink:'',  //网站链接（一键获取时有用）
            activeImgUrl:'',  //当前显示的图片链接
            activeimgBase64:"", //当前显示的图片文件base64
            imgFile:undefined, //图片文件对象
        }
    },
    watch:{
        
    },
    methods:{
        modeChange({activeData}){  //模式切换时触发
            this.activeMode = activeData;
        },
        initData({websiteLink='',activeImgUrl='',activeIndex=0}={}){  //初始化数据（外部调用）
            this.activeMode = this.modeList[activeIndex];
            this.websiteLink = websiteLink;
            this.activeImgUrl = activeImgUrl;
        },
        getData(){  //获取当前数据（外部调用）
            return {
                activeIndex:this.modeList.indexOf(this.activeMode),
                activeImgUrl:this.activeImgUrl,
                imgFile:this.imgFile,
            };
        },
        getIcon(){  //一键获取网站图标
            if(!this.websiteLink) return;
            console.log(this.websiteLink);
            this.activeImgUrl = getIcon(this.websiteLink);
        },
        removeData(){ //清空数据(外部可直接调用)
            switch(true){
                case this.activeMode.value == 'one':
                    this.activeImgUrl = '';
                    break;
                case this.activeMode.value == 'two':
                    this.activeimgBase64 = '';
                    this.imgFile = undefined;
                    break;
            }
        },
        fileChange(file){
            if(file.size>this.maxSize*1024*1024){
                this.$message({
                    showClose: true,
                    message:'大小不能超过'+this.maxSize+'M！',
                    type: 'error',
                    offset:80,
                });
                return;
            }
            this.imgFile = file;
            compressImg({
                file:file,
                maxSize:100,  //压缩后的最大大小
            }).then(data=>{
                this.activeimgBase64 = data.base64;
            }).catch(()=>{
               this.imgFile = undefined;
               this.activeimgBase64 = '';
            });
            return file;
        },
    },
}
</script>

<style scoped lang="scss">
.icon-select-cp{
    --border-color:#eaeefb;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    background-color: white;
    .el-image{
        width: 100px;
        min-width: 100px;
        height: 100px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        i{
            font-size: 40px;
            line-height: 40px;
            padding:0;
        }
        /deep/img{
            width: 90px;
            height: 90px;
            border-radius:50%;
            border: 1px solid #a9aaaa;
            box-sizing: border-box;
        }
    }
    .right-container{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-left: 1px solid var(--border-color);
        display: grid;
        grid-template-areas:
            "one two"
            "three two";
        grid-auto-flow: row dense;
        grid-template-columns: 1fr 60px;
        grid-gap: 10px;
        >.type-list{
            grid-area: one;
            width: 100%;
            --my-tabs-padding:3px;
            --my-tabs-border-radius:5px;
        }
        >.remove-bt{
            grid-area: two;
            width:100%;
            height: 100%;
            transition: all 0.2s;
            padding:0 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f2f5;
            cursor: pointer;
            i{
                font-weight: bold;
                font-size: 25px;
            }
            &:hover{
                background-color: #e6e6e6;
            }
        }
        >.select-container{
            grid-area: three;
            >.one{
                line-height: 1.5;
                height: fit-content;
                text-align: left;
                >.website{
                    display: grid;
                    grid-template-columns: 1fr min-content;
                    grid-gap: 10px;
                }
                /deep/.el-textarea{
                    margin-top: 10px;
                    .el-textarea__inner {
                        border-radius: 2px;
                    }
                }
                >.website-list{
                    margin-top: 5px;
                    a{
                        cursor: pointer;
                        margin:5px 5px 0px 0;
                        padding: 0 10px;
                        background-color: #00c58e;
                        border-radius: 2px;
                        display: inline-flex;
                        line-height: 2;
                        transition: all 0.2s;
                        font-size: 13px;
                        &:hover{
                            box-shadow: inset 0 0 0 2px #00561d, 0 0 10px rgba(0,0,0,.136);
                        }
                    }
                }
            }
            >.two{
                padding:5px;
                border-right: 1px solid var(--border-color);
                box-sizing: border-box;
                background-color: #f0f2f5;
                &:hover{
                    background-color: #e1e2e4;
                }
            }
        }
    }
}
</style>
